<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
</head>
<body>

<div id="app">
   <!-- <div v-if="flag">
        <lable for="mobile">手机号码</lable>
        <input type="text" id="mobile">
    </div>

    <div v-else-if="!flag" >
        <lable for="email">邮箱</lable>
        <input type="text" id="email">
    </div>
-->

    <!--  v-show 性能好一些  适合频繁切换-->
    <div v-show="flag">
        <lable for="mobile">手机号码</lable>
        <input type="text" id="mobile">
    </div>

    <div v-show="!flag" >
        <lable for="email">邮箱</lable>
        <input type="text" id="email">
    </div>

    <input type="button" value="切换" @click="change">

</div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let mv = new Vue({
        el: "#app",
        data: {

            flag: true,
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }

        }

    })


</script>


</body>
</html>